<!-- 收到的极速联系 -->
<template>
	<view>
		<uni-popup ref="submitRef" type="center">
			<view class="borderR-20 padding-all-30 relative" style="background-color: #fff;width: 60vw;">
				<view class="absolute" style="right: 30rpx;top: 30rpx;" @click="$refs.submitRef.close()">
					<uni-icons type="closeempty" size="20"></uni-icons>
				</view>
				<view class="text-align-center fs-30">
					请输入拒绝理由
				</view>
				<view class="marginTop-30">
					<uni-easyinput v-model="refuseInfo" placeholder="请输入拒绝理由"></uni-easyinput>
				</view>
				<view>
					<button class="submit" @click="onSubmit">确定</button>
				</view>
			</view>
		</uni-popup>


		<view class="tabItem">
			<fui-tabs :tabs="tabs" :current="tabIndex" :sliderBackground="'#FFDD00'" :selectedColor="'#000'" :size="24"
				:short="false" scroll @change="changeTabs"></fui-tabs>
		</view>
		<view class="node-info"></view>

		<swiper :current="tabIndex" :duration="300" @change="tabChange" :style="{ height: height + 'px' }">
			<swiper-item class="fui-swiper__item" v-for="page in tabs.length" :key="page">
				<scroll-view scroll-y :show-scrollbar="false" :style="{ height: height + 'px' }"
					@scrolltolower="onPullUpLoading(page)">

					<view class="row-center marginTop-50" v-if="contactList.length == 0">
						<view class="">
							<image :src="baseUrl + 'icon/null.png'" mode="widthFix"></image>
							<view class="text-align-center">
								还没有收到的极速联系~
							</view>
						</view>
					</view>


					<view class="" v-else>
						<view class="margin-all-20 padding-all-30 relative borderR-10"
							style="background-color: #FFF;overflow: hidden;" v-for="(item, index) in contactList"
							:key="index" @click="onNav(`/artistesPages/pages/artister?artisterID=${item.UserID}`)">
							<view class="absolute right top fs-24"
								style="background-color: #999;padding: 5rpx 10rpx;color: #fff;">
								<text class="" v-if="item.ContactState == 0">待审核</text>
								<text class="" v-if="item.ContactState == 1">联系中</text>
								<text class="" v-if="item.ContactState == 2">同意</text>
								<text class="" v-if="item.ContactState == 3">拒绝</text>
							</view>

							<view class="row-between">
								<view class="row-start">
									<view class="NoticeUserHeadPic">
										<head-wear :width="80" :height="80" :borderWidth="4" :userInfo="item"
											:WxHeadPic="item.WxHeadPic" :UserLevelID="item.UserLevelID" image-width="30"
											image-height="20" size="16" right="-7" bottom="0" oneRight="0"></head-wear>
									</view>
									<view class="marginLeft-20">

										<view class="artName">
											<text class="one-ellipsis"
												style="display: block;max-width: 90%;">{{item.NickName}}</text>
											<image :src="baseUrl + 'icon/boy.png'" class="sex-image-size marginLeft-10"
												v-if="JSON.parse(item.UserSex).text === '男'"></image>
											<image :src="baseUrl + 'icon/girl.png'" class="sex-image-size marginLeft-10"
												v-if="JSON.parse(item.UserSex).text === '女'"></image>

											<auth-label v-if="item.isAuthOk == 2" :size="18" height="30"></auth-label>
											<personality-label v-if="item.BeautifulWomen == 1" :size="18"
												height="30"></personality-label>
											<image :src="baseUrl + 'icon/enterprise.png'"
												class="company-image-size marginLeft-10"
												v-if="item.isCompanyAuth && item.isCompanyAuth == 1"></image>
										</view>

										<view class="artLabel" v-if="item.Roles">
											<text>
												<text v-for="(roleitem,roleindex) in item.Roles" :key="roleindex">
													{{ roleitem.LabelName }}
													<text v-if="roleindex < item.Roles.length-1">，</text>
												</text>
											</text>
											<text class="geline">|</text>
											<text class="artAddr"
												v-if="item.UserCity !== '请设置您所在的城市'">{{ item.UserCity }}</text>
										</view>
									</view>
								</view>
								<view class="artState">

									<view class="fs-24" v-if="item.isOnline == 1">在线</view>
									<view class="fs-24" v-else>
										{{ $common.timeDiff(item.onlineTime,new Date()) }}
									</view>
								</view>
							</view>
							<view class="fs-24" v-if="item.ContactState == 2">
								<view class="row-between marginTop-20 flex-1 ">
									<text>联系昵称：</text>
									<text style="color:#999">{{ item.ContactName }}</text>
								</view>
								<view class="row-between marginTop-10 flex-1">
									<text>联系手机号：</text>
									<text style="color:#999">{{ item.UserMobile }}</text>
								</view>
								<view class="row-between marginTop-10 flex-1">
									<text>联系微信号：</text>
									<text style="color:#999">{{ item.WeixinCode }}</text>
								</view>
								<view class="row-between marginTop-10 flex-1">
									<text>联系QQ号：</text>
									<text style="color:#999">{{ item.QQCode }}</text>
								</view>
							</view>

							<view class="flex-1 text-align-left marginTop-20 borderR-30 padding-all-20 fs-24"
								style="background-color: #dedede;">
								<text>联系备注：</text>
								<text style="color:#999">{{ item.ContactMemo }}</text>
							</view>

							<view class="row-end marginTop-20">
								<button class="currency-button" v-if="item.ContactState == 2 || item.ContactState == 3"
									@click.stop="onDelete(item.ContactID)">删除</button>
								<button class="currency-button agree-button" style="margin-right: 20rpx"
									v-if="item.ContactState == 1" @click.stop="onAgree(item.ContactID)">同意</button>
								<button class="currency-button refuse-button" v-if="item.ContactState == 1"
									@click.stop="onRefuse(item.ContactID)">拒绝</button>
							</view>
						</view>
						<uni-load-more :status="more"></uni-load-more>
					</view>

				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import ztAuthLabel from "@/components/authLabel.vue";
	import ZtPersonalityLabel from "@/components/personalityLabel.vue";
	import ZtHeadWear from "@/components/headwear.vue"
	export default {
		components: {
			ztAuthLabel,
			ZtPersonalityLabel,
			ZtHeadWear,
		},
		data() {
			return {
				tabs: [{
						index: 0,
						name: '全部'
					},
					{
						index: 1,
						name: '待审核'
					},
					{
						index: 2,
						name: '联系中'
					},
					{
						index: 3,
						name: '同意'
					},
					{
						index: 4,
						name: '拒绝'
					},
				],
				tabIndex: 0,
				height: 0,
				contactList: [],
				refuseInfo: '', //拒绝理由
				ContactID: 0,
				page: 1,
				more: '',
				baseUrl: ''
			};
		},
		onLoad() {
			this.baseUrl = this.$baseUrl;
			const query = uni.createSelectorQuery().in(this);
			query
				.select(".node-info")
				.boundingClientRect((data) => {
					// console.log("node-info", data);
					this.height = uni.getSystemInfoSync().windowHeight - (data.top + 10)
				})
				.exec();
			this.loadDataOne();
		},
		methods: {
			onNav(url) {
				uni.navigateTo({
					url
				})
			},
			changeTabs(event) {
				// console.log('evnet1', event)
				this.switchTab(event.index)
			},
			tabChange(event) {
				// console.log('evnet2', event)
				this.switchTab(event.detail.current)
			},
			switchTab(index) {
				if (this.tabIndex === index) return;
				this.tabIndex = index;
				this.loadDataOne()
			},
			onPullUpLoading() {
				this.page += 1;
				this.loadData()
			},
			confirmAgree() {

			},
			// 同意
			onAgree(ContactID) {
				uni.showModal({
					title: '确定同意吗？',
					success: res => {
						if (res.confirm) {
							this.$httpost('/contact/contactState', {
								ContactID: ContactID,
								ContactState: 2, // 2同意 ，3拒绝
								RejectReason: ''
							}).then(res => {
								// console.log('同意', res)
								uni.showToast({
									title: '已同意！',
									icon: 'success'
								})
								this.loadDataOne()
							})
						}
					}
				})
			},
			// 拒绝
			onRefuse(ContactID) {
				this.ContactID = ContactID;
				uni.showModal({
					title: '确定拒绝吗？',
					success: res => {
						if (res.confirm) {
							this.$refs.submitRef.open()

						}
					}
				})
			},
			onSubmit() {
				if (!this.refuseInfo) {
					uni.showToast({
						title: '请输入拒绝理由！',
						icon: 'none'
					})

					return false;
				}
				this.$httpost('/contact/contactState', {
					ContactID: this.ContactID,
					ContactState: 3, // 2同意 ，3拒绝
					RejectReason: this.refuseInfo
				}).then(res => {
					// console.log('拒绝', res)
					uni.showToast({
						title: '已拒绝！',
						icon: 'success'
					})
					this.refuseInfo = "";
					this.$refs.submitRef.close()
					this.loadDataOne()
				})
			},
			onDelete(ContactID) {
				uni.showModal({
					title: '确定删除吗？',
					success: res => {
						if (res.confirm) {
							this.$httpost('/contact/contactDel', {
								ContactID: ContactID,
							}).then(res => {
								// console.log('删除', res)
								uni.showToast({
									title: '已删除！',
									icon: 'success'
								})
								this.loadDataOne()
							})
						}
					}
				})

			},
			alertDialogConfirm() {
				this.$refs.inputDialog.open()
			},
			loadDataOne() {
				uni.showLoading({
					title: ''
				})
				this.$httpost('/contact/contactList', {
					state: this.tabIndex - 1,
					launch: 0, // 0 我收到的联系列表，1 我发起的联系列表
					page: 1
				}).then(res => {
					// console.log('联系接口返回数据',res)
					if (res.code == 200) {
						this.contactList = res.data
					}
					uni.hideLoading()
				})
			},
			loadData() {
				this.more = 'loading';
				this.$httpost('/contact/contactList', {
					state: this.tabIndex - 1,
					launch: 0, // 0 我收到的联系列表，1 我发起的联系列表
					page: this.page
				}).then(res => {
					// console.log('联系接口返回数据',res)
					if (res.code == 200) {
						if (this.contactList.length !== 0) {
							this.contactList = [...this.contactList, ...res.data];
							if (res.data.length == 0) this.more = 'onMore';
						} else {
							this.contactList = res.data;
							this.more = ''
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.artLabel {
		font-size: 20rpx;
		color: #999;
		font-size: 20rpx;
		color: #999;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.publicBottom {
		position: fixed;
		bottom: 0rpx;
		width: 100vw;
		height: 100rpx;
		background-color: #FFF;
	}

	.NoticeUserHeadPic {
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
		background-color: #CCC;
	}

	.NoticeUserHeadPic image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
	}

	.artState {
		width: 100rpx;
		text-align: right;
		color: #999
	}

	.currency-button {
		margin: 0;
		padding: 0;
		width: 110rpx;
		height: 55rpx;
		line-height: 55rpx;
		font-size: 24rpx;


		&:nth-child(2)::after {
			border: none;
		}

		&:nth-child(3)::after {
			border: none;
		}

	}

	.agree-button {
		background-color: #00ff7b;
		color: #fff;
	}

	.refuse-button {
		background-color: #ff5050;
		color: #fff;
	}

	.artName {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-size: 30rpx;
	}

	.submit {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		background-color: #FFDD00;
		margin-top: 60rpx;
	}
</style>